<template>
    <div class="layout-popup">
        <popup ref="popupRef" title="" :async="true" width="550px" @confirm="handleSubmit" @close="handleClose">
            <el-form ref="formRef" :model="formData" label-width="120px">
                <el-form-item label="纸张大小">
                    <div class="flex gap-30px">
                        <div
                            class="w-80px text-center flex flex-col items-center cursor-pointer"
                            @click="handleClickPaperSize(1)"
                        >
                            <div
                                class="common-item w-50px"
                                :class="formData.paperSize == 1 ? 'selected' : 'no-selected'"
                            >
                                A3
                            </div>
                            <div :class="formData.paperSize == 1 ? 'text-#2097ff' : 'text-#b4b4b4'">A3/B4/8K纸</div>
                        </div>
                        <div
                            class="w-80px text-center flex flex-col items-center cursor-pointer"
                            @click="handleClickPaperSize(2)"
                        >
                            <div
                                class="common-item w-35px"
                                :class="formData.paperSize == 2 ? 'selected' : 'no-selected'"
                            >
                                A4
                            </div>
                            <div :class="formData.paperSize == 2 ? 'text-#2097ff' : 'text-#b4b4b4'">A4/B5纸</div>
                        </div>
                    </div>
                </el-form-item>
                <el-form-item label="答题卡布局">
                    <div class="flex gap-30px">
                        <div
                            v-if="formData.paperSize == 2"
                            class="w-80px text-center flex flex-col items-center cursor-pointer"
                            @click="handleClickAnswerSheetLayout(1)"
                        >
                            <div class="common-item w-50px column1-active"></div>
                            <div class="text-#2097ff">一栏</div>
                        </div>
                        <div
                            v-if="formData.paperSize == 1"
                            class="w-80px text-center flex flex-col items-center cursor-pointer"
                            @click="handleClickAnswerSheetLayout(2)"
                        >
                            <div
                                class="common-item w-50px"
                                :class="formData.answerSheetLayout == 2 ? 'column2-active' : 'column2'"
                            ></div>
                            <div :class="formData.answerSheetLayout == 2 ? 'text-#2097ff' : 'text-#b4b4b4'">两栏</div>
                        </div>
                        <div
                            v-if="formData.paperSize == 1"
                            class="w-80px text-center flex flex-col items-center cursor-pointer"
                            @click="handleClickAnswerSheetLayout(3)"
                        >
                            <div
                                class="common-item w-50px"
                                :class="formData.answerSheetLayout == 3 ? 'column3-active' : 'column3'"
                            ></div>
                            <div :class="formData.answerSheetLayout == 3 ? 'text-#2097ff' : 'text-#b4b4b4'">三栏</div>
                        </div>
                    </div>
                </el-form-item>
                <el-form-item label="阅卷方式">
                    <el-radio-group v-model="formData.gradingMethod">
                        <el-radio :value="1">线上阅卷</el-radio>
                        <el-radio :value="2">先阅后扫</el-radio>
                    </el-radio-group>
                </el-form-item>
            </el-form>
        </popup>
    </div>
</template>
<script lang="ts" setup>
import type { FormInstance } from 'element-plus'
import Popup from '@/components/popup/index.vue'
import { reactive, shallowRef } from 'vue'
import { useDtkStore } from '@/stores/dtk'

const dtkStore = useDtkStore()

const emit = defineEmits(['success', 'close'])

const formRef = shallowRef<FormInstance>()
const popupRef = shallowRef<InstanceType<typeof Popup>>()

const formData = reactive({
    paperSize: 1,
    answerSheetLayout: 2,
    gradingMethod: 1
})

const handleSubmit = async () => {
    dtkStore.layoutInfo.paperSize = formData.paperSize
    dtkStore.layoutInfo.answerSheetLayout = formData.answerSheetLayout
    dtkStore.layoutInfo.gradingMethod = formData.gradingMethod
    popupRef.value?.close()
    emit('success')
}

const open = () => {
    formData.paperSize = dtkStore.layoutInfo.paperSize
    formData.answerSheetLayout = dtkStore.layoutInfo.answerSheetLayout
    formData.gradingMethod = dtkStore.layoutInfo.gradingMethod
    popupRef.value?.open()
}

const handleClose = () => {
    emit('close')
}

const handleClickPaperSize = (paperSize: number) => {
    if (paperSize == 1) {
        formData.paperSize = 1
        formData.answerSheetLayout = 2
        return
    }
    formData.paperSize = 2
    formData.answerSheetLayout = 1
}

const handleClickAnswerSheetLayout = (answerSheetLayout: number) => {
    formData.answerSheetLayout = answerSheetLayout
}

defineExpose({
    open
})
</script>
<style scoped>
.common-item {
    @apply h-40px leading-40px rounded-4px font-700;
}
.selected {
    @apply text-#2097ff border-(2px solid #2097ff);
}
.no-selected {
    @apply text-#b4b4b4 border-(2px solid #b4b4b4);
}
.column1-active {
    background: url()
        no-repeat;
}
.column2 {
    background: url()
        no-repeat;
}
.column2-active {
    background: url()
        no-repeat;
}
.column3 {
    background: url()
        no-repeat;
}
.column3-active {
    background: url()
        no-repeat;
}
</style>
